<template>
    <div id="shop">
        <mt-header fixed :title="statusName+'超市'">
            <span slot="left">
                <mt-button icon="back" @click.native="goB">返回</mt-button>
            </span>
            <span slot="right">
                <mt-button v-show="!isManger" @click.native="manger">管理</mt-button>
                <mt-button v-show="isManger" @click.native="manger">取消</mt-button>
            </span>
        </mt-header>
        <!-- 点餐区 -->
        <div class="myShop-content">
            
            <!-- 商家信息 -->
            <div class="shop-info-show">
                <p>商铺：{{sname}}</p>
                <p>地址：{{shopAddress}}</p>
                <p>电话：{{shopPhone}}</p>
            </div>

            <!-- 点餐、商家选项卡 -->
            <mt-navbar v-model="selected" fixed>
                <mt-tab-item id="goods">点餐</mt-tab-item>
                <mt-tab-item id="boss">优惠卷</mt-tab-item>
            </mt-navbar>

            <mt-tab-container v-model="selected">
                <mt-tab-container-item id="goods">
                  <div class="goodWrap" v-getH>
                      <!-- 左边菜单栏 -->
                    <div class="leftMenu" ref="leftScroll" v-getH>
                        <ul>
                            <li v-for="(items, index) in goodMenu"
                             :key="index"
                            :class="{active: currentIndex === index}"
                            @click="clickLeftMenu(index, $event)">
                                {{ items.title}}
                                
                                <p @click.stop="editMenu(index)" v-show="ItemDelect">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shanchu"></use>
                                    </svg>
                                </p>

                                <p @click.stop="editMenu(index)" v-show="ItemEdit">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-ai-edit"></use>
                                    </svg>
                                </p>
                            </li>

                            <li v-show="isManger" class="active" @click="addMenu">
                                添加列表
                            </li>
                            <li v-show="isManger" class="active"  @click="() =>{
                                setState({ItemDelect: !ItemDelect, ItemEdit: false})
                                }">
                                删除列表                              
                            </li>
                            <li v-show="isManger" class="active" @click="() =>{
                                setState({ItemEdit: !ItemEdit, ItemDelect: false,})
                                }">
                                编辑列表                              
                            </li>
                          
                        </ul>
                    </div>
                    <!-- 右边菜单栏 -->
                    <div class="rightMenu" ref="rightScroll" v-getH>
                        <ul>
                            <li v-for="(items, index) in goodMenu" :key="index" ref="rItem">
                                    <!-- 标题 -->
                                <div class="header-title">
                                    <p class="title">{{items.title}}</p>
                                    <span v-show="isManger" @click="setEditFood(index)">添加食材</span>
                                </div>
                                <!-- 图片 信息列表区 -->
                                <div class="goodList" v-for="(item, i) in items.data" :key="i">
                                    <!-- 图片 -->
                                    <div class="shop-img" @click.stop="readImg(index, i)">
                                        <img :src="item.foodImgs[0]">
                                    </div>
                                    <!-- 列表信息 -->
                                    <div class="shop-info" @click="toFoodMsg(index, i)">                                                                                   <!-- 菜名 -->
                                        <div class="shop-name">
                                            <h1 class="nowrap">{{item.foodName}}</h1>
                                            <div class="food-dele-edit">
                                                <p v-show="isManger" @click.stop="deleFood(index, i)">删除</p>
                                                <p v-show="isManger" @click.stop="setEditFood(index, i)">编辑</p>
                                            </div>
                                        
                                        </div>
                                        <!-- 说明 -->
                                        <div class="shop-commit nowrap">{{item.foodDsec}}</div>
                                        <!-- 销售额 以及好评率 -->
                                        <div class="shop-msg">
                                            <!-- 销售额 -->
                                            <span>月销售 {{item.foodTotal}} 份</span>
                                            <span>好评率 {{item.foodCommitRate}}</span>
                                        </div>
                                    </div>                                   
                                </div>
                            </li>
                            <!-- 解决better-scroll滑动问题 -->
                            <li v-getLiH></li>
                        </ul>
                    </div>

                      <!-- 空空如也 -->
                    <div class="emplty-con" v-if="!isManger && goodMenu.length === 0">
                        <div class="emplty">
                            <div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-meiyoushangpin"></use>
                                </svg>
                            </div>
                            <div style="color: #141414;" class="text">
                                没有商品
                            </div>
                        </div>
                    </div>
                  </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="boss">
                    <div class="bossWrap" v-getH>
                        <!-- 按钮 -->
                        <div class="boss-button">
                            <mt-button @click.native="isAdCoupon = !isAdCoupon" type="primary" size="large">
                                添加优惠卷
                            </mt-button>
                        </div>
                        <!-- 优惠卷界面 -->
                         <div class="boss-coupon-list" v-getLiH>
                            <div class="coupon-list">
                                <!-- 优惠劵 -->
                                <div  v-for="(item, index) in couponMenu" :key="index">
                                    <mt-cell
                                        :title="item.msg"
                                        is-link
                                        v-if="item.couponStatus === 0"
                                       >
                                        <span class="icon">
                                            <mt-button type="danger" size="small"
                                                @click.native="removeToCoupon(item.couponFlag, index)">删除</mt-button>
                                        </span>
                                    </mt-cell>
                                </div>                              
                            </div>
                        </div>
                        <!-- 空空如也 -->
                        <div class="emplty-con" v-if="couponMenu.length === 0">
                            <div class="emplty">
                                <div>
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-youhuijuan-weikaitong"></use>
                                    </svg>
                                </div>
                                <div class="text">
                                    暂无优惠劵
                                </div>
                            </div>
                        </div>
                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="goodInfo">
                   <div class="goodInfoWrap"  v-getH>
                       <div class="good-info"  ref="goodInfoScroll">
                           <div class="good-info-list">
                                <div class="sell-title">{{currentFood.foodName}}</div>
                                <div class="sell-info">
                                    <!-- 标题 -->
                                    <div class="title">
                                        <div class="name">
                                        销售情况
                                        </div>
                                    </div>
                                    <div class="sell-content">
                                        <p>月销售 {{currentFood.foodTotal}} 份</p>
                                        <p>好评率 {{currentFood.foodCommitRate}}</p>
                                    </div>
                                </div>
                                <div class="sell-decr">
                                    <div class="title">
                                        <div class="name">商家描述</div>
                                    </div>
                                    <div class="sell-content">
                                        <p>
                                            {{currentFood.foodDsec}}
                                        </p>
                                    </div>
                                </div>

                                <div class="sell-commit">
                                    <div class="title">
                                        <div class="name">用户评论</div>
                                    </div>
                                    <!-- 有评论 -->
                                    <div class="sell-content" v-for="(item, index) in currentFood.foodCommit" :key="index">
                                        <div>
                                            <div class="hImg">
                                                <img :src="item.commitHImg">
                                            </div>
                                            <div class="info">
                                                <p class="uname">
                                                    {{item.commitName}}:
                                                    <span>{{item.commitRate}}</span>
                                                </p>
                                                <p class="commit">
                                                   {{item.commit}}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                        <!-- 没评论 -->
                                    <div class="noCommit" v-if="currentFood.foodCommit&&currentFood.foodCommit.length === 0">
                                        暂无评论
                                    </div>
                                </div>
                           </div>
                       </div>
                   </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
        
        <!-- 管理员添加数据区域 -->
        <transition name="rIn">
            <div class="shop-manger" v-if="isAdFood">
                <div class="foodData">
                    <mt-field :state="nameFlag" label="菜名"  placeholder="请输入菜名字(2~8个字符)" v-model="foodName"></mt-field>
                    <mt-field :state="priceFlag" label="价格" placeholder="例如：9.9(数字)" type="number" v-model="foodPrice"></mt-field>
                    <mt-field :state="commitFlag" placeholder="关于菜的描述(10~50个字符)" type="textarea" rows="4" v-model="foodDsec"></mt-field>
                    <!-- 上传图片 最多三张图片 -->
                    <div class="food-img">
                        <div class="show-img">
                            <div v-for="(item, index) in foodImgs" :key="index">
                                <img :src="item" alt="">
                                <span @click="imgDele(index)">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shanchu1"></use>
                                    </svg>
                                </span>
                            </div>  
                            <div v-if="foodImgs.length === 0">
                                <img src="../../lib/img/tou.jpg" alt="">
                            </div>                       
                        </div>
                        <div class="select-img">
                            <input type="file" multiple @change="imgFood" >
                            <mt-button type="danger" size="large">上传图片</mt-button>
                        </div>
                        
                    </div>
                    <mt-button type="primary" size="large" v-if="!isEditFood" @click.stop="addFood">保存</mt-button>
                    <mt-button type="primary" size="large" v-else @click.stop="editFood">确认修改</mt-button>
                </div>
                <!-- 关闭 -->
                <div class="shop-manger-close" @click.stop="addClose">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                </div>
                <div class="shop-msg" v-if="maxLengthMsg">
                    最多只能上传三张图片,请重新上传
                </div>
            </div>
        </transition>
        <!-- 管理员添加优惠卷区域 -->
        <transition name="rIn">
            <div class="shop-manger shop-manger-coupon" v-if="isAdCoupon">
                <!-- 选择打折的类型 满多少减多少，还是 直接打多少折 还是 直接抵扣多少钱 -->
                <div class="content">
                        <div class="coupon-type">
                            <mt-picker :slots="slots" @change="selectVal"></mt-picker>
                        </div>
                        <div class="input-num">
                        <mt-field :label="couponType" type="number"  :placeholder="msg" v-model="couponMoney"></mt-field>
                        <mt-field v-show="couponType === '满减'" label="起减" type="number"  placeholder="请输入能满减金额"
                                v-model="startMoney"></mt-field>
                        </div>
                        <div class="input-num">
                        <mt-button type="primary" size="large" @click.native="sendToCoupon">发放优惠卷</mt-button>
                        </div>
                </div>
                <!-- 关闭 -->
                <div class="shop-manger-close" @click.stop="isAdCoupon = !isAdCoupon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                </div>
            </div>
        </transition>
        <!-- 图片预览 -->
        <div class="read-img" v-if="isReadImg">
            <mt-header fixed :title="currentFood.foodName">
                <span slot="left">
                    <mt-button icon="back" @click.native="() =>{setState({isReadImg: false})}">返回</mt-button>
                </span>
                <span slot="right">
                    <mt-button>详情...</mt-button>
                </span>
            </mt-header>
             <!-- 价格 以及添加减 -->
            <div class="shop-price-ad">
                <p class="shop-price">￥{{currentFood.foodPrice}}</p>
                <div class="shop-option">
                    <p>-</p>
                    <p>{{currentFood.foodCount}}</p>
                    <p>+</p>
                </div>
            </div>

              <div class="read-content">
                <mt-swipe :auto="0">
                    <mt-swipe-item v-for="(item, index) in currentFood.foodImgs" :key="index">
                        <img :src="item">
                    </mt-swipe-item>
                </mt-swipe>
            </div>
        </div>
    </div>
</template>
<script>

import Bscroll from 'better-scroll'
import axios from 'axios'
import{mapState, mapMutations, mapActions} from 'vuex'
import { Toast, MessageBox, Indicator} from 'mint-ui'
export default {
    data(){
        return {
            topHeight: 210,//除了商品列表上面的高度
            selected: 'goods',
            

            foodIndex: 0,//为哪条菜单添加的索引
            foodDataIndex: 0,//菜单栏的哪条食材
            foodName: '',
            foodPrice: '',
            foodDsec: '',
            foodImgs: [],
            rItem: null,//右菜单DOM元素
            scrollY: 0,//获取实时滚动位置
            heightLi: [],//获取每一个li的高度

            //校验食材输入情况
            nameFlag: 'error',
            commitFlag: 'error',
            priceFlag: 'error',
            
            //是否是编辑食材
            isEditFood: false,//是否是编辑状态 false 不是编辑状态
            isAdFood: false,
            maxLength: 3,//食材图片上传的最大数
            //三个地方要关闭 1 点击保存按钮 或者关闭食材添加界面
            maxLengthMsg: false,//超过三张就显示 提示信息


            //商家数据
            isAdCoupon: false,//是否添加优惠卷
            couponType: '折扣',
            msg: '请输入折扣(0~10)',
            couponMoney: '',//折扣金额
            startMoney: '',//起减金额
            slots: [
                {
                    flex: 1,
                    values: ['折扣', '满多少才减', '任意商品都可以减'],
                    className: 'coupon',
                }
            ]
        }
    },
    inject: ['reload', 'goB'],
    //生命周期函数
    created(){
        console.log(this.couponMenu)
        //使用一下 promise
        this.getShopInfo({shopId: this.shopId}).then((data) =>{
            this.setState(data)
        })

        //因此不应该 在这里拿取 在它的上一级拿取 shop.vue 拿取
        
        this.$nextTick(() =>{
            this._scrollInit()
            this.getLiHeight()
        })
    },
    computed:{        
        ...mapState([
            'storeFlag',
            'uname',
            'shopId',
            'sname',
            'shopAddress',
            'shopPhone',
            'statusName',
            'goodMenu',
            'isReadImg',
            'currentFood',

            //菜单栏管理
            'ItemEdit',// 左菜单栏编辑
            'ItemDelect',// 做菜单删除
            'isManger',//是否点击管理

            //优惠卷
            'couponMenu'
        ]),

        currentIndex(){
            const {scrollY, heightLi} = this

            let index = heightLi.findIndex((item, index) =>{
                return scrollY >= heightLi[index] && scrollY < heightLi[index + 1]
            })
            return index > 0 ? index: 0
        }
    },
    watch:{
        foodName(val, oldVal){

           const newVal = this.trime(val) 

           if(newVal.length < 2 || newVal.length > 8){
               this.nameFlag = 'error'
           }else{
               this.nameFlag = 'success'
           }
        },
        foodDsec(val, oldVal){

            const newVal = this.trime(val) 

            if(newVal.length < 2 || newVal.length > 50){
                this.commitFlag = 'error'
            }else{
                this.commitFlag = 'success'
            }
        },

        foodPrice(val, oldVal){
            if(!val){
                this.priceFlag = 'error'
            }else{
                this.priceFlag = 'success'
            }
        }, 
    },
    //方法
    methods:{
        ...mapMutations([
            'setState',
            'setToast',
            'setIndicator',//加载图标
            'setMessage'
        ]),
        ...mapActions([
            'getShopInfo',//拿取数据
            'sendCoupon',//发放优惠卷
            'removeCoupon',//删除优惠卷
            'changeShopFood',
            'removeShopInfo',
            'getCoupon'
            
        ]),
        //字符串去首位空格
        trime(str){
            return str.replace(/^\s+|\s+$/g,"")
        },

//-------------------------优惠劵的方法
        //获取选择折扣的方式
        selectVal(pickerObj, val){
            //折扣  只能 0-10不能是 0
            if(val[0] === this.slots[0].values[0]){
                this.couponType = '折扣'
                this.msg = '请输入折扣(0~10)'

            //满减 金额不限
            }else if(val[0] === this.slots[0].values[1]){
                this.couponType = '满减'
                this.msg = '请输入满减抵扣的金额'
            //抵扣 金额不限
            }else{
                this.couponType = '抵扣'
                this.msg = '请输入抵扣金额'
            }
        },

        sendToCoupon(){
            let {couponType, couponMoney, startMoney} = this

            if(couponMoney === '') return this.message('提示', `请输入 ${couponType} 的金额`)

            //优惠卷的数据
            let couponData = {}
            const {uname, sname, storeFlag} = this
            //优惠劵 id
            couponData.couponId = storeFlag
            //商店用户名 和商店名字
            couponData.uname = uname
            couponData.sname = sname
            //优惠卷类型
            couponData.couponType = couponType
            //优惠卷的发放者：用户名-店铺名
            couponData.belong = storeFlag + 'b'
            //优惠卷状态标识 此时在数据库给默认值即可
            couponData.couponStatus = 0
            //订单与顾客的关系
            couponData.couponSign = storeFlag
            couponData.couponFlag = Date.now() + storeFlag + Math.random()  

            if(couponType === '折扣'){
                //此时折扣需要判断数值  此时是string类型                
                couponMoney = parseFloat(couponMoney)

                //输入的折扣 不和规格
                if(couponMoney<=0 || couponMoney > 10) return this.message('提示', '折扣只能是0~10之间，不包括0')

                //正常 询问是否发放优惠卷
                couponData.msg = `店内商品打${couponMoney}折`
                couponData.data = {
                    count: couponMoney
                }


                
            }else if(couponType === '满减'){
                //判断 第一个输入款在 开头已经判断 起减输入的内容 不能为空 
                if(startMoney === ''){
                    return this.message('提示', '请输入起减的金额')
                }

                //这里说明 输入金额有 已经合法
                couponData.msg = `满${startMoney}元减${couponMoney}元`
                couponData.data = {
                    count: couponMoney,
                    startCount: startMoney
                }

            }else{
                //抵扣金额没有限制
                couponData.msg = `店内任意商品抵扣${couponMoney}元`
                couponData.data = {
                    count: couponMoney
                }
            }

            //此时这个就是我们想要的优惠卷的数据
            //发放到数据库管理起来即可
            // this.setIndicator('正在发放')
            this.sendCoupon({
                data: couponData,
            }).then(() =>{
                this.couponMenu.unshift(couponData)
                this.setToast('发放成功')
            }, () =>{
                this.setMessage('发放失败，请重新操作')
            })
            /*
                优惠卷的数据：
                    1 优惠卷的类型
                    2 优惠卷 的抵扣金额 或者 折扣
                    3 满减 需要的一个起减金额
                    4 数据格式
                        data里面应该 有一个标志着这个优惠卷 属于谁
                            在购物车里面哪条食材可以使用该优惠卷
                            只能是 店主的 用户名-店铺的名字
                                例如 车神-北京烤鸭店
                        {
                            couponType: 优惠卷的类型
                            couponId: 店主的id
                            belong: 属于谁的优惠卷 id + 'b'
                            couponStatus: 标志着该商品的删除还是没有删除  
                                       0---没删除 1---已经领取 2 已经使用  3已过期(店家删除，此时用户显示已过期) 4 顾客已经删除
                            couponSign: 标志该优惠卷 与用户的关系 店主为 ''
                            couponFlag: 唯一标志着该优惠劵
                            data:{           
                                count: 打折大小 或者折扣金额
                                startCount: 这个满减 才会有的数据
                                            即为 当满足多少才会折扣的最少金额
                            } 优惠卷的数据
                        }
                    5 顾客领取的优惠卷的数据格式
                        {
                            couponId: 顾客的id + '-'
                            couponType: 优惠卷的类型
                            belong: 属于谁的优惠卷
                            couponStatus: 标志着该商品的删除还是没有删除  
                                       0---没删除 1---已经领取 2 已经使用  3已过期(店家删除，此时用户显示已过期) 4 顾客已经删除
                            couponSign: 标志该优惠卷 与用户的关系 用户为 店主用户名 '-' 顾客用户名
                            couponFlag: 唯一标志着该优惠劵
                            data: {
                                count: 打折大小 或者折扣金额
                                startCount: 这个满减 才会有的数据
                                            即为 当满足多少才会折扣的最少金额
                            }
                        }

            */
        },

        removeToCoupon(couponFlag, index){
            MessageBox({
                title: '提示',
                message: '删除优惠劵：'+ this.couponMenu[index].msg+'?',
                showCancelButton: true
            }).then(action =>{
                if(action === 'cancel') return

                    //网络慢的话 显示加载
                this.setIndicator('正在删除')
                this.isShowInfo = false
                this.removeCoupon({
                    couponFlag,
                    data: {
                        couponStatus: 3,
                    }
                }).then(() =>{

                    this.couponMenu.splice(index, 1)
                    Indicator.close()

                }, (msg) =>{

                    this.setMessage(msg)
                    Indicator.close()
                })
            })
           
        },

        message(title, message){
            MessageBox({
                title,
                message,
                showCancelButton: true
            })
        },


//-------------------------点餐的方法
        //是否进入管理状态
        manger(){
            this.setState({isManger: !this.isManger, ItemDelect: false, ItemEdit: false})
        },

//---------------------------------左菜单栏的编辑操作
        //左菜单栏的删除和编辑
        editMenu(foodIndex){
        
            //删除操作
            if(this.ItemDelect){

                MessageBox({
                    title: '提示',
                    message: '是否删除' + this.goodMenu[foodIndex].title + '?',
                    showCancelButton: true
                }).then(action =>{

                    if(action === 'cancel') return

                    this.setIndicator('正在删除')

                    this.removeShopInfo({
                        shopId: this.shopId,
                        data:{
                            foodIndex
                        }
                    }).then(() =>{
                        this.goodMenu.splice(foodIndex, 1)
                        Indicator.close()

                    }, () =>{   
                        this.setMessage('修改失败')
                        Indicator.close()
                    })
                })
            }


            if(this.ItemEdit){
                MessageBox.prompt('输入你想要的菜名').then(({ value, action }) => {

                        if(!value) return MessageBox.alert('菜名不能为空')

                        this.removeShopInfo({
                            shopId: this.shopId,
                            data:{
                                changeInfo: value,
                                foodIndex
                            }
                        }).then(() =>{
                            this.goodMenu[foodIndex].title = value
                            
                        }, () =>{
                            this.setMessage('修改失败')
                        })
                    }, () =>{
                        console.log('取消编辑')
                    })
            }
        }, 
        //添加菜单栏
        addMenu(){
            
            //点击添加菜单栏 关闭删除和编辑操作
            this.setState({ItemDelect: false, ItemEdit: false})

            MessageBox.prompt('请输入菜单名,不能为空').then(({ value, action }) => {

                if(!value){
                    return MessageBox.alert('请输入菜单名')
                }else if(!this.trime(value)) {
                    return MessageBox.alert('空格无效，请重新输入')
                }else if(this.trime(value) < 2){
                    return MessageBox.alert('至少两个字符，不包含空格')
                }
  
                 //显示加载图标
                // this.setIndicator('正在添加...')

                //每一条食材
                const foodOne = {title: value, data:[]}

                this.changeShopFood({
                    shopId: this.shopId,
                    data:{
                        changeInfo: foodOne
                    }
                }).then(() =>{
                   Indicator.close()
                   //此时才添加
                   this.goodMenu.unshift(foodOne)
                   this.reload()
                }, () =>{
                    Indicator.close()
                    this.setMessage('创建失败')

                })
            }, () =>{
                console.log('已经取消')
            })
        },

        //关闭添加食材按钮
        addClose(){

            this.isAdFood = !this.isAdFood
            //关闭图片上传 最大长度提示信息
            this.maxLengthMsg = false
            //把数据清空 此时只有在编辑状态的时候才需要 添加自己会刷新
            if(this.isEditFood){
                this.isEditFood = false
                this.foodName =  ''
                this.foodPrice =  ''
                this.foodDsec =  ''
                this.foodImgs =  []
            }
        },

        //添加食材  此时是右菜单栏，因此需要派一个click事件 
        addFood(){

            if(!this.checkFood()) return
            
            const {foodName, foodDsec, foodPrice,foodImgs, foodIndex, shopId} = this

            //判断 商家没有选择图片 foodImgs选择初始值
            if(foodImgs.length === 0) foodImgs.push(require('../../lib/img/tou.jpg'))

            const foodObj = {
                foodId: Date.now(),
                foodName, 
                foodDsec, 
                foodPrice,
                foodImgs,
                foodCount: 0,
                foodCommit: [],
                foodTotal: 0,
                foodCommitRate:0
            }

            this.setIndicator('正在添加...')
            this.changeShopFood({
                shopId,
                data:{
                    changeInfo: foodObj,
                    foodIndex,
                }
            }).then(() =>{
                Indicator.close()
                this.goodMenu[foodIndex].data.unshift(foodObj)
                //刷新一下
                this.reload()
            }, () =>{

                Indicator.close()
                this.setMessage('添加失败')
                
            })

            //关闭添加食材界面
            this.addClose()
        },
        //编辑食材
        editFood(){

            if(!this.checkFood()) return

            this.setIndicator('请稍等')

            //获取数据
            const {foodName, foodDsec, foodPrice,
            foodImgs, shopId, foodIndex, foodDataIndex} = this

            const foodData = this.goodMenu[foodIndex].data[foodDataIndex]
            //判断 商家没有选择图片 foodImgs选择初始值
            if(foodImgs.length === 0) foodImgs.push(require('../../lib/img/tou.jpg'))

            const foodObj = {
                foodName, 
                foodDsec, 
                foodPrice,
                foodImgs
            }

            this.removeShopInfo({
                shopId,
                data:{
                    foodIndex,
                    index: foodDataIndex,
                    changeInfo: foodObj
                }
            }).then(() =>{

                //遍历 赋予state的值
                for(let item in foodObj){
                    this.goodMenu[foodIndex].data[foodDataIndex][item] = foodObj[item]
                }
                Indicator.close()
                this.reload()

            }, () =>{
                this.setMessage('编辑失败')
                Indicator.close()
            })

            //关闭界面
            this.addClose()
        },

        checkFood(){
            const {nameFlag, commitFlag, priceFlag} = this
            //此时如果这三个数据之一值为error都是填写不正确
            if(nameFlag === 'error' || commitFlag === 'error' || priceFlag === 'error'){
               MessageBox.alert('数据填写有误, 请按照正确格式填写')
               return false
            }

            //关闭提示信息 图片上传最大长度提示
            this.maxLengthMsg = false

            return true
        },

        //编辑食材 显示添加食材列表
        setEditFood(foodIndex, index){
            this.addClose()
            this.foodIndex = foodIndex
            //index存在则说明是编辑食材
            if(typeof index === 'undefined') return
            //否则执行下面逻辑

            this.isEditFood = true
            //获取当前食材的索引
            this.foodDataIndex = index
            const foodObj = this.goodMenu[foodIndex].data[index]
            for(let item in foodObj){
                if(item === 'foodCount') return
                if(item === 'foodImgs') return this[item] = foodObj[item].slice(0)
                this[item] = foodObj[item]
            }
        },


        //删除某个食材的图片
        imgDele(index){
           
           this.foodImgs.splice(index, 1)
        },
        //图片预览
        readImg(foodIndex, index){
            this.setState({isReadImg: true, currentFood: this.goodMenu[foodIndex].data[index]})
        },
        //食材图片的上传
        imgFood(ev){
            const { files} = ev.target
            
            let inputObj = ev.target

            if(files.length > this.maxLength){
                
                //显示提示信息
                this.maxLengthMsg = true
                inputObj = ''

                return
            }

            //隐藏提示信息
            this.maxLengthMsg = false

            const readFileImg = (file) =>{              
                if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
                   
                    var reader = new FileReader()
                    //每次选择先把 图片数组清空
                    this.foodImgs = []
                    reader.readAsDataURL(file)

                    reader.addEventListener("load", (ev) =>{
                        
                        //防止 图片重复
                        if(this.foodImgs[0]&&this.foodImgs[0] === ev.target.result){
                            return this.foodImgs[0] = ev.target.result
                        }                       
                        this.foodImgs.unshift(ev.target.result)

                        //在这里把input的
                        inputObj.value = ''
                    }, false)
                }else{
                   alert('文件包含了不是图片的文件，请重新选择') 
                }
            }

            ;[].forEach.call(files, readFileImg)
           
            
        },
        //删除某个食材
        deleFood(foodIndex, index){
            /*
                foodIndex 要删除的是哪个菜单栏
                index  该菜单栏的哪个食材
            */
           MessageBox({
               title: '提示',
               message: '是否要删除食材：' + this.goodMenu[foodIndex].data[index].foodName,
               showCancelButton: true
           }).then(active =>{
                if(active === 'cancel') return
                
                this.setIndicator('正在删除')

                this.removeShopInfo({
                    shopId: this.shopId,
                    data:{
                        foodIndex,
                        index
                    }
                }).then(() =>{
                    
                    this.goodMenu[foodIndex].data.splice(index, 1)
                    Indicator.close()
                    this.reload()
                }, () =>{
                    this.setMessage('删除失败')
                })
           })         
        },

        //数组深度拷贝
        arrClone(arr){

            let newArr = []
            
            for(let item of arr){	

                let newObj = {}
                for(let key in item){												
                    
                    if (Object.prototype.toString.call(item[key]) === "[object Array]") {
                        
                        newObj[key] = item[key].slice(0)							
                                                                                                            
                    }else{
                        //如果不是数组 就直接push
                        newObj[key] = item[key]							
                    }						
                }
                
                newArr.push(newObj)	
                
            }

            return newArr

        },

         //前往食材查看详情
        toFoodMsg(foodIndex, index){
            this.selected = 'goodInfo'

            this.setState({
                currentFood: this.goodMenu[foodIndex].data[index],
                foodTypeIndex: foodIndex
            })
        },
        //初始化better-scroll
        _scrollInit(){
            //获取DOM
            this.rItem = this.$refs.rItem
            //开启点击事件
            this.leftScroll = new Bscroll(this.$refs.leftScroll, { click: true})
            this.rightScroll = new Bscroll(this.$refs.rightScroll, { probeType: 3, click: true})

            this.rightScroll.on('scroll', pos =>{
                this.scrollY = Math.abs(Math.round(pos.y))
            })
        },
        //获取右菜单每个li的高度
        getLiHeight(){
            if(!this.rItem) return
          
            let h = 0
            this.heightLi.push(h)
            
            this.rItem.forEach((li, index) => {
                h += li.clientHeight - 1
                this.heightLi.push(h)
            })

        },
        //点击左菜单，右菜单同步
        clickLeftMenu(index, ev){
            
            if(!ev._constructed) return
      
            const el = this.rItem[index]

            this.rightScroll.scrollToElement(el, 300)
        }
    },
    //指令
    directives:{
        //商品滚动的最大高度
        getH:{
             inserted: function (el) {
                 //  这里即为 减去 点餐区域的margin-top(220)值
               el.style.height = (document.querySelector('html').clientHeight - 220) + 'px'
            }
        },
        //食材的最后一个li的高度
        getLiH:{
             inserted: function (el) {
                //  这里即为 减去 点餐区域的margin-top(220)值 和 每条食材的标题高度值(60)
               el.style.height = (document.querySelector('html').clientHeight - 280) + 'px'
            }
        },
        //优惠劵的高度
        getCouH:{
             inserted: function (el) {
                //  这里即为 减去 点餐区域的margin-top(220)值 和 每条食材的标题高度值(60)
               el.style.height = (document.querySelector('html').clientHeight - 280) + 'px'
            }
        }
    }
}
</script>

<style lang="less" scoped>
#shop{
    height: 100%;
    .myShop-content{
        height: 100%;
        .shop-info-show{
            position: fixed;
            top: 40px;
            width: 100%;
            height: 120px;
            background-color: #49CB5F;
            padding-left: 60px;
            
            P{
                font-size: 22px;
                color: #fff;
                margin: 5px 0;
            }
        }
        //点餐
        .goodWrap{
            display: flex;
            margin-top: 220px;
            .leftMenu{
                flex: 2;
                z-index: 10;
                overflow: hidden;
                margin-right: 5px;
                ul{
                    // background: #fff;
                    li{
                        position: relative;
                        padding: 15px 0;
                        font-size: 18px;
                        color: #666;
                        text-align: center;
                        border-bottom: 1px solid #ccc;
                        > p{
                            position: absolute;
                            left: 0;
                            top: 0;
                            height: 100%;
                            width: 100%;
                            > .icon{
                                position: absolute;
                                left: 0;
                                top: 0;
                                right: 0;
                                bottom: 0;
                                margin: auto;
                                height: 70%;
                                width: 70%;
                            }
                        }
                    }
                   .active{
                       position: relative;
                        background: #49CB5F;
                        color: #fff;                     
                   }
                }
            }
            .rightMenu{
                flex: 5;
                overflow: hidden;
                ul{
                    li{
                        // 标题
                       .header-title{
                           display: flex;
                           justify-content: space-around;
                           border-bottom: 1px #ccc solid;
                           margin-bottom: 10px;
                           font-size: 20px;
                           padding: 9px 0;
                           .title{
                               flex: 1;
                                text-align: center;                             
                                color: #49CB5F;
                                // padding: 10px 0;
                           }
                            span{                               
                                margin-right: 10px;
                                font-size: 16px;
                                background: #49CB5F;
                                color: #fff;
                                width: 75px;
                                text-align: center;
                            }
                       }
                        //信息
                        .goodList{
                            display: flex;
                            padding: 10px 0;
                            
                            .shop-img{
                                flex: 2;
                                > img{
                                    width: 100%;
                                    height: 100%;
                                    max-width: 70px;
                                    max-height: 80px;
                                }
                            }
                            .shop-info{
                                flex: 5;
                                padding-left: 10px;
                                > div{
                                    margin-bottom: 5px;
                                }
                                .shop-name{
                                    display: flex;
                                    justify-content: space-between;
                                    color: #000;
                                    h1{
                                        font-size: 18px;
                                        font-weight: 700;
                                    }
                                    .food-dele-edit{
                                        display: flex;
                                        p{
                                            margin-right: 15px;
                                            font-size: 16px;
                                           
                                            background: #49CB5F;
                                            color: #fff;
                                            width: 40px;
                                            max-height: 24px;
                                            text-align: center;
                                        }
                                    }
                                }
                                .shop-commit{
                                    font-size: 15px;
                                    color: #666;
                                }
                                .shop-msg{
                                    color: #000;
                                   span{
                                       font-size: 12px;
                                   }
                                   span:last-child{
                                       margin-left: 5px;
                                   }
                                    
                                }
                            }
                        }
                    }
                }
            }
        }
        //优惠劵区域
        .bossWrap{
            position: relative;
            overflow: hidden;
            .boss-coupon-list{
                position: absolute;
                width: 100%;
                padding: 0;
                height: 100%;
                overflow-y: auto;
            }
        }
    }

    //食材添加
    .shop-manger{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 10;
        .foodData{
            width: 100%;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            .food-img{
                display: flex;
                justify-content: space-between;
                background-color: #fff;
                padding: 5px 0;
                .show-img{
                    flex: 1;
                    display: flex;
                    > div{
                        position: relative;
                        height: 50px;
                        max-width: 25%;
                        margin: 0 5px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        span{
                            position: absolute;
                            right: 0;
                            top: 0;
                            > svg{
                                width: 22px;
                                height: 22px;
                            }
                        }   
                    }
                }
                .select-img{
                    position: relative;
                    width: 80px;
                    > input{
                        position: absolute;
                        left: 0;
                        top: 0;
                        height: 100%;
                        z-index: 1;
                        opacity: 0;
                    }
                    .mint-button--large{
                        height: 100%;
                    }
                }
            }
        }
        
        //提示信息
        .shop-msg{
            font-size: 20px;
            color: red;
            text-align: center;
            margin-top: 70px;
        }

        //关闭按钮
        .shop-manger-close{
            float: right;
            > svg{
                width: 50px;
                height: 50px;
            }
        }
    }
    .shop-manger-coupon{
        background: #fff;
        .content{
            margin-top: 50px;
            .input-num{
                margin-top: 20px;
            }
        }
        .shop-manger-close{
            position: absolute;
            right: 0;
            top: 0;

        }
    }
    //图片预览
    .read-img{
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background-color: rgba(0,0,0, 0.7);
        z-index: 10000;
        .read-content{
            flex: 1;
            width: 100%;
            margin-top: 20px;
            height: 220px;
            img{
                width: 100%;
            }
        }

        .shop-price-ad{
            display: flex;
            justify-content: space-around;
            height: 50px;
            line-height: 50px;
            margin-top: 50px;
            .shop-price{
                flex: 1;
                font-size: 33px;
                text-align: right;
                color: #c4d08b;
            }
            .shop-option{
                flex: 1;
                display: flex;
                margin-left: 20px;
                padding-top: 2px;
                p{
                    width: 40px;
                    height: 40px;
                    font-size: 30px;
                    line-height: 40px;
                    text-align: center;
                    margin: 0 5px;
                    background-color: #49CB5F;
                    border-radius: 50%;
                }
            }
        }
    }
}


.mint-navbar.is-fixed {
    top: 160px;    
}

</style>

